<template>
	<view class="content">
		<view class="index-login">
			<view class="index-logo">
				<image src="../../static/img/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="index-title">
			<text>18信息系毕业设计选题</text>
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="check">
				<view class="input">
					<input type="text" value="" placeholder="请输入学号" name="code"/>
				</view>
				<view class="input">
					<input value="" placeholder="请输入密码" :password="showPassword" name="pwd" />
					<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
				</view>
					<button form-type="submit" class="login">登录</button>
				<view class="logintext">
					<text>没有账号，请先注册→</text>
					<text @tap="gotoRegister" class="res">点击注册</text>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	var  graceChecker = require("../../common/graceChecker.js");
	export default {
		data() {
			return {
				showPassword: true,
				code:"",
				pwd:"",
			}
		},
		onLoad() {
		},
		methods: {
			changePassword: function() {
			    this.showPassword = !this.showPassword;
			},
			//跳转到注册页面
			gotoRegister(){
				uni.redirectTo({
					url:"../register/register",
				})
			},
			formSubmit:function(e){
				// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [
					{name:"code", checkType : "notnull", checkRule:"",  errorMsg:"请输入学号"},
					{name:"pwd", checkType : "notnull", checkRule:"",  errorMsg:"请输入密码"}
				];
				//进行表单验证
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					this.code =e.detail.value.code;
					this.pwd =e.detail.value.pwd;
					uni.request({
						url: '/graduate_api/api_18/submit.php', //仅为示例，并非真实接口地址。
													method:"POST",
						 data: {
							code:this.code,
							pwd:this.pwd,
						},
						success: (res) => {
							if(res.data.code==200){
							   // console.log(res)
							   uni.showToast({
								   title: "登录成功",
								   duration:500
							   });
							   localStorage.setItem('namecode',res.data.namecode);
							   
							setTimeout(function(){
							   uni.redirectTo({
								   url: '../index/index'
							   });
						   },500);
				   }else{
					   uni.showToast({
						   icon: "none",
					       title: "用户名或者密码错误，登录失败",
					       duration:1500
					   });
				   }
			    }
			});
		
					
					
				 //    uni.showToast({title:"登陆成功！", icon:"none"});
					// uni.reLaunch({
					//     url: '../index/index'
					// });
				}else{
				    uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
		}
	}
</script>

<style scoped>
	.res{
		color: red;
		font-size: 12px;
	}
	.content{
		background-image: url(../../static/img/bj.jpg);
		width: 100vw;
		height: 100vh;
	}
	.index-login{
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.index-logo{
		width: 300upx;
		height: 300upx;
		overflow: hidden;
	}
	.index-logo image{
		width: 100%;
		height: 100%;
	}
	.index-title {
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.index-title text{
		font-size: 20px;
	}
	.check{
		padding: 0 100upx;
		margin-top: 20px;
	}
	.input{
		display: flex;
		align-items: center;
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}
	.input input{
		width: 100%;
		height: 100%;
		font-size: 15px;
	}
	.login{
		width: 100%;
		height: 80upx;
		background: #63a7ff;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
	.logintext {
		text-align: center;
		color: #63a7ff;
		font-size: 15px;
		margin-top: 20px;
		display: flex;
		justify-content: space-around;
	}
	.uni-icon {
	    font-family: uniicons;
	    font-size: 24px;
	    font-weight: normal;
	    font-style: normal;
	    width: 24px;
	    height: 24px;
	    line-height: 24px;
	    color: #999999;
	}
	.uni-eye-active {
	    color: #63a7ff;
	}
</style>
